<template>
  <div id="app">
    <div class="middle_box">
        <img src="../../assets/imgs/404.png">
        <el-button type="primary" @click="goback" size="large" class="btn">
            返回上一页
        </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    goback() {
      let self = this;
      self.$router.back();
    }
  }
};
</script>
<style>

.middle_box {
  width: 400px;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.middle_box img {
    width:100%;
    height: auto;
}

.btn {
  width: 80%;
  color: #fff;
  font-weight: bold;
  margin-top: 30px;
  background-color: #0091ea;
  border-color: #0091ea;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
}

.login_btn:hover {
  background-color: #0071b7;
  border-color: #0071b7;
}
</style>
<style scoped>
#app {
  background-image: url("../../assets/imgs/bg.png");
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>